<template>
  <div class="flex home">
    <div class="home_l">
      <candiDate></candiDate>
    </div>
    <div v-if="!isShowFaceToFace" class="home_r">
      <div class="flex home_header">
        <div class="hd_img">
          <img src="@/assets/evaluation/user.png" alt="" />
        </div>
        <div class="flex_unit hd_info">
          <div class="hd_name">
            <span>Alice</span>
            <img src="@/assets/evaluation/icon.png" alt="" />
          </div>
          <div class="hd_time">
            <span>更新时间：2020-09-30 14:55</span>
            <button>未测评</button>
          </div>
        </div>
        <div class="hd_icon">
          <img src="@/assets/evaluation/wx.png" alt="" />
        </div>
      </div>
      <div class="flex home_info">
        <div class="flex_unit">年龄区间：18-25周岁</div>
        <div class="flex_unit">最高学历：本科</div>
        <div class="flex_unit">上一职业：检验员</div>
        <div class="hi_more" @click="godetails">详情 <i class="el-icon-arrow-right"></i></div>
      </div>
      <div class="flex home_content">
        <div class="hc_het">
          <div class="hc_img">
            <img src="@/assets/evaluation/cicon.png" alt="" />
          </div>
          <div class="btn_wrap">
            <button @click="facetofaceFn">面对面测评</button>
            <button>邀请测评</button>
          </div>
        </div>
      </div>
    </div>
    <Question v-if="isShowFaceToFace"></Question>
  </div>
</template>
<script>
import candiDate from "@/components/candidate";
import Question from './question';
export default {
  name: "Evaluation",
  components: {
    candiDate,
    Question
  },
  data() {
    return {
      isShowFaceToFace:false
    }
  },
  created() {
    if (this.$route.query.state) {
      this.isShowFaceToFace = !this.isShowFaceToFace;
    }
  },
  methods: {
    godetails(){
      this.$router.push('/talentpool')
    },
    facetofaceFn(){
      this.isShowFaceToFace = !this.isShowFaceToFace;
    }
  },
};
</script>
<style lang="less" scoped>
.home_header {
  padding: .2rem .3rem;
  .flex {
    justify-content: center;
  }
  .hd_img {
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    margin-right: 20px;
    img {
      display: block;
      width: 100%;
    }
  }
  .hd_name {
    font-size: .15rem;
    color: #5a6b80;
    img {
      display: inline-block;
      width: .2rem;
      height: .2rem;
      border-radius: 50%;
      margin-left: 10px;
      vertical-align: -20%;
    }
  }
  .hd_time {
    font-size: .12rem;
    color: #5a6b80;
    button {
      color: #f5a623;
      border: 1px solid #f5a623;
      border-radius: 2px;
      font-size: .12rem;
      background: #fff;
      margin-left: .1rem;
    }
  }
  .hd_icon {
    img {
      display: block;
      width: .3rem;
      height: .3rem;
      border-radius: 50%;
    }
  }
}
.home_info {
  background: #fafafa;
  font-size: .14rem;
  color: #5a6b80;
  height: .44rem;
  line-height: .44rem;
  padding: 0 .3rem;
  position: relative;
  box-shadow: 10px -2px 15px -13px rgba(0,0,0,0.2) inset;
  .flex_unit{
    margin-right: 0.35rem;
  }
  .hi_more {
    position: absolute;
    right: 0.2rem;
    top: 0;
    color: #1fa9da;
    i{
      color: #CCCCCC;
    }
  }
}
.home_content {
  height: calc(100% - 1.24rem);
  align-items: center;
  justify-content: center;
  .hc_het{
      height: 2.2rem;
  }
  .hc_img {
    img {
      display: block;
      height: .75rem;
      margin: 0 auto;
    }
  }
  .btn_wrap {
    text-align: center;
    button {
      background: #d41045;
      border: none;
      border-radius: 4px;
      color: #fff;
      font-size: .16rem;
      padding: 0.07rem .25rem;
      margin: .3rem .1rem;
    }
  }
}
</style>